import React from 'react';
import PropTypes from 'prop-types';
import '../CSS/NextAndPrev.css';

function NextAndPrev(props) {
    // eslint-disable-next-line react/destructuring-assignment
    const { next, prev } = props.nextAndPrev;

    return (
        <section className="switch-container">
            <div className="prev blog">上一篇：
                { prev ? <a href={`/content/${prev._id}`}>{prev.title}</a> : "无" }
            </div>
            <div className="next blog">下一篇：
                { next ? <a href={`/content/${next._id}`}>{next.title}</a> : "无" }
            </div>
        </section>
    );
}

NextAndPrev.propTypes = {
    nextAndPrev: PropTypes.shape({
        prev: PropTypes.shape({
            _id: PropTypes.string,
            title: PropTypes.string,
        }),
        next: PropTypes.shape({
            _id: PropTypes.string,
            title: PropTypes.string,
        }),
    }),
};

NextAndPrev.defaultProps = {
    nextAndPrev: {
        prev: null,
        next: null,
    },
};

export default NextAndPrev;
